<template>
  <view>
    <!-- 滚动容器：支持垂直滚动，占满屏幕 -->
    <scroll-view scroll-y class="scroll-container">
      <!-- 1. 泉州风光轮播模块 -->
      <view class="module">
        <text class="module-title">泉州风光</text>
        <swiper class="swiper" indicator-dots autoplay interval="3000" circular>
          <swiper-item v-for="(img, index) in bannerImgs" :key="index">
            <image :src="img" class="swiper-img" mode="aspectFill"></image>
          </swiper-item>
        </swiper>
      </view>

      <!-- 2. 泉州介绍富文本模块 -->
      <view class="module">
        <text class="module-title">泉州介绍</text>
        <rich-text :nodes="cityIntro"></rich-text>
      </view>

      <!-- 3. 探索进度模块 -->
      <view class="module">
        <text class="module-title">探索进度</text>
        <view class="progress-wrap">
          <text class="progress-label">当前进度: {{ progress }}%</text>
          <progress class="progress" :percent="progress" show-info></progress>
        </view>
      </view>

      <!-- 4. 城市选择模块 -->
      <view class="module">
        <text class="module-title">城市选择</text>
        <picker class="picker" :range="cityList" @change="onCityChange" :value="selectedCityIndex">
          <view class="picker-text">当前选择: {{ cityList[selectedCityIndex] }}</view>
        </picker>
      </view>

      <!-- 5. 泉州宣传视频模块 -->
      <view class="module">
        <text class="module-title">泉州宣传</text>
        <video :src="videoSrc" controls class="video" />
      </view>

      <!-- 6. 泉州背景音乐模块 -->
      <view class="module">
        <text class="module-title">泉州背景音乐</text>
        <view class="audio-group">
          <button class="audio-play-btn" @click="toggleAudioPlay">
            {{ audioContext.paused ? '播放' : '暂停' }}
          </button>
          <text class="audio-desc">泉州脆音 - 泉州传统乐曲</text>
          <!-- 音频进度条 -->
          <view class="audio-progress">
            <slider 
              :value="audioProgress" 
              @change="setAudioProgress" 
              min="0" 
              max="100" 
              activeColor="#007AFF"/>
          </view>
        </view>
      </view>

      <!-- 7. 偏好设置模块 -->
      <view class="module">
        <text class="module-title">偏好设置</text>
        <view class="preference-item">
          <text>出行方式: </text>
          <radio-group @change="onTravelChange">
            <label>
              <radio value="bus" checked />公交
            </label>
            <label>
              <radio value="drive" />自驾
            </label>
            <label>
              <radio value="walk" />步行
            </label>
          </radio-group>
        </view>

        <view class="preference-item preference-switch">
			<text>显示推荐景点: </text>
          <switch checked @change="onSwitchChange" />
        </view>

        <view class="slider-item">
          <text>探索半径: {{ radius }}km</text>
          <slider 
            :value="radius" 
            :min="1" 
            :max="50" 
            :step="1" 
            show-value 
            @change="onSliderChange"
          />
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      // 轮播图图片（需放在 static 目录）
      bannerImgs: [
        "/static/city1.png",
        "/static/city2.jpg",
        "/static/city3.jpg",
        "/static/city4.jpg",
        "/static/city5.jpg"
      ],
      // 富文本内容（带 HTML 格式）
      cityIntro: `
        <h4>海上丝绸之路起点 - 泉州</h4>
        <p>历史文化：泉州是国务院首批公布的24个历史文化名城之一，是古代"海上丝绸之路"起点，宋元时期被誉为"东方第一大港"。</p>
        <p>著名景点：清源山、开元寺、泉州清净寺、崇武古城、洛阳桥等。</p>
        <p>特色文化：拥有<span style="color: blue;">南音、木偶戏</span>和<span style="color: blue;">闽南建筑</span>等丰富的非物质文化遗产。</p>
      `,
      progress: 60, // 探索进度百分比
      cityList: [
        "福建省 - 泉州市 - 丰泽区",
        "福建省 - 泉州市 - 南安市",
        "福建省 - 厦门市 - 湖里区",
        "贵州省 - 贵阳市 - 花溪区",
        "贵州省 - 六盘水市 - 钟山区",
        "四川省 - 成都市 - 锦江区",
        "云南省 - 丽江市 - 古城区",
        "重庆市 - 渝北区"
      ],
      selectedCityIndex: 0, // 默认选中城市的索引
      videoSrc: '/static/city-video.mp4', // 视频路径（需放在 static 目录）
      audioSrc: '/static/city-music.mp3', // 音频路径（需放在 static 目录）
      audioContext: null, // 音频上下文实例
      audioProgress: 0, // 音频进度百分比
      radius: 10 // 探索半径初始值
    }
  },
  onLoad() {
    // 初始化音频上下文
    this.audioContext = uni.createInnerAudioContext();
    this.audioContext.src = this.audioSrc;
    // 监听音频进度变化，更新进度条
    this.audioContext.onTimeUpdate(() => {
      if (!isNaN(this.audioContext.duration)) {
        this.audioProgress = (this.audioContext.currentTime / this.audioContext.duration) * 100;
      }
    });
    // 监听音频错误
    this.audioContext.onError(err => {
      uni.showToast({ title: '音频加载失败', icon: 'none' });
    });
  },
  methods: {
    // 城市选择器变化回调
    onCityChange(e) {
      this.selectedCityIndex = e.detail.value;
    },
    // 切换音频播放/暂停
    toggleAudioPlay() {
      if (this.audioContext.paused) {
        this.audioContext.play().catch(err => {
          uni.showToast({ title: '播放失败', icon: 'none' });
        });
      } else {
        this.audioContext.pause();
      }
    },
    // 拖动进度条调整音频进度
    setAudioProgress(e) {
      const progress = e.detail.value;
      if (!isNaN(this.audioContext.duration)) {
        this.audioContext.seek((progress / 100) * this.audioContext.duration);
      }
    },
    // 格式化音频时间（秒 → 分:秒）
    formatTime(second) {
      if (isNaN(second)) return '00:00';
      const min = Math.floor(second / 60).toString().padStart(2, '0');
      const sec = Math.floor(second % 60).toString().padStart(2, '0');
      return `${min}:${sec}`;
    },
    // 出行方式选择回调
    onTravelChange(e) {
      console.log('选择的出行方式: ', e.detail.value);
    },
    // 显示推荐景点开关回调
    onSwitchChange(e) {
      console.log('是否显示推荐景点: ', e.detail.value);
    },
    // 探索半径滑块变化回调
    onSliderChange(e) {
      this.radius = e.detail.value;
      console.log('当前探索半径: ', this.radius, 'km');
    }
  },
  onUnload() {
    // 页面销毁时销毁音频上下文（防止内存泄漏）
    if (this.audioContext) {
      this.audioContext.stop();
      this.audioContext.destroy();
      this.audioContext = null;
    }
  }
};
</script>

<style scoped>
/* 滚动容器：占满屏幕高度，背景色统一 */
.scroll-container {
  height: 100vh;
  width: 100%;
  box-sizing: border-box;
  padding: 10rpx;
  background-color: #f5f5f5;
}

/* 模块通用样式：卡片化，统一间距和圆角 */
.module {
  margin-bottom: 20rpx;
  padding: 20rpx;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* 模块标题样式：统一字体和底部间距 */
.module-title {
  display: block;
  font-size: 32rpx;
  font-weight: bold;
  margin-bottom: 15rpx;
  color: #333;
}

/* 轮播图样式：控制高度和溢出隐藏 */
.swiper {
  height: 400rpx;
  width: 100%;
  border-radius: 12rpx;
  overflow: hidden;
}
.swiper-img {
  width: 100%;
  height: 100%;
}

/* 富文本内部样式：控制标题和段落的字体、行高 */
rich-text h4 {
  font-size: 28rpx;
  margin-bottom: 15rpx;
}
rich-text p {
  font-size: 26rpx;
  line-height: 1.6;
  margin-bottom: 10rpx;
}

/* 进度条区域样式：垂直排列文字和进度条 */
.progress-wrap {
  display: flex;
  flex-direction: column;
}
.progress-label {
  font-size: 28rpx;
  margin-bottom: 10rpx;
  color: #666;
}

/* 城市选择器样式：控制选择器的边框和内边距 */
.picker-text {
  padding: 15rpx;
  border: 1px solid #eee;
  border-radius: 4rpx;
  font-size: 28rpx;
  min-height: 60rpx;
  display: flex;
  align-items: center;
}

/* 视频样式：控制视频的宽高 */
.video {
  width: 100%;
  height: 400rpx;
}

/* 音频模块样式 */
.audio-group {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.audio-play-btn {
  width: 150rpx;
  height: 60rpx;
  line-height: 60rpx;
  text-align: center;
  background-color: #007AFF;
  color: #fff;
  border-radius: 8rpx;
  margin-bottom: 15rpx;
}
.audio-desc {
  font-size: 26rpx;
  color: #666;
  margin-bottom: 10rpx;
}
.audio-progress {
  width: 100%;
}
.progress-time {
  font-size: 24rpx;
  color: #999;
  margin-top: 8rpx;
  text-align: center;
  display: block;
}

/* 偏好设置相关样式 */
.preference-item {
  margin-top: 20rpx;
  display: flex;
  align-items: center;
}
.preference-item text {
  font-size: 28rpx;
  margin-right: 10rpx;
}
.slider-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  margin-top: 20rpx;
}
.slider-item text {
  font-size: 28rpx;
  color: #333;
  margin-right: 20rpx;
  white-space: nowrap;
}
slider {
  flex: 1;
}
</style>